<template>
    <div class="sharebox-overlay" v-if="getOverlay">
      <div class="top_tips" style="display: block;">请长按图片，将本条快讯推荐给好友</div>
      <div class="qcode_tip" style="height: 80%; padding: 0px; display: block;">
        <div class="pic_share" style="width: 100%;height: 100%;"><img :src="getShareBoxImg" style="display: block; margin: 0px auto; width: auto; height: 100%;" alt=""></div>
        <div class="closebtn" style="display: block; right: 34px;"><a :style="closeBtnBgStyle" @click="toggleOverlay">关闭</a></div>
      </div>
    </div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'shareoberlaybox',
  data () {
    return {
      closeBtnBgStyle: {
        backgroundImage: 'url(' + require('../assets/images/closebtn.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundColor: '#F8F8F8 '
      }
    }
  },
  methods: {
    ...mapActions({
      toggleOverlay: 'ToggleOverlay'
    })
  },
  computed: {
    ...mapGetters({
      getOverlay: 'GetOverlay',
      getShareBoxImg: 'GetShareBoxImg'
    })
  }
}

</script>

<style>
.sharebox-overlay {
    position: fixed;
    background: rgba(0,0,0,0.4);
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9998;
    /*display: none;*/
    width: 100%;
    height: 100%;
}
.sharebox-overlay .top_tips {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    z-index: 10000;
    background: rgba(255,235,155,0.95);
    color: #A65018;
}
.sharebox-overlay .qcode_tip{  display: block;position: fixed;background-color: rgba(255, 255, 255,0);top: 10%;left: 0;right:0;margin:auto;z-index: 100000;-webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; }
.sharebox-overlay .pic_share{-webkit-border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; -o-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0;}
.sharebox-overlay .closebtn {width: 32px;height: 32px;position: absolute;right: 0px;top: -10px;-webkit-border-radius: 50%; -moz-border-radius: 50%;-o-border-radius: 50%; border-radius: 50%; }
.sharebox-overlay .closebtn a{width: 32px;height: 32px;display: block;overflow: hidden;text-indent: -9999em;
    background: #F8F8F8;
    background-size: 24px 24px;-webkit-border-radius: 50%; -moz-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;
}
</style>
